<template>
  <div id="app">
    <!-- 导航栏 -->
    <el-header class="header">
      <el-row>
        <el-col :span="4">
          <div class="logo">BIKE SHOP</div>
        </el-col>
        <el-col :span="16">
          <el-menu :default-active="activeIndex" class="menu" mode="horizontal" @select="handleSelect">
            <el-menu-item index="1">首页</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="4">
          <div class="header-right">
            <el-badge :value="0" class="ml-2">
              <el-button type="text">
                <i class="el-icon-shopping-cart-2"></i>
              </el-button>
            </el-badge>
          </div>
        </el-col>
      </el-row>
    </el-header>

    <!-- 轮播图 -->
    <el-carousel height="400px" arrow="always">
      <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
        <img :src="item.imgUrl" alt="自行车轮播图" class="carousel-img">
        <div class="carousel-text">
          <h3>{{ item.title }}</h3>
          <p>{{ item.description }}</p>
        </div>
      </el-carousel-item>
    </el-carousel>

    <!-- 关于我们 -->
    <el-main class="container">
      <el-row class="section" justify="center">
        <el-col :span="20">
          <div class="section-title">关于我们</div>
          <div class="section-content">
            <el-row>
              <el-col :span="12">
                <img src="https://picsum.photos/600/400?random=1" alt="自行车店照片" class="about-img">
              </el-col>
              <el-col :span="12">
                <div class="about-text">
                  <h3>我们的故事</h3>
                  <p>
                    BIKE SHOP成立于2010年，是一家专注于高品质自行车销售与服务的专业店。
                    我们的使命是通过优质的产品和服务，让更多人享受骑行的乐趣，体验健康的生活方式。
                  </p>
                  <p>
                    我们拥有一支专业的团队，他们不仅对各类自行车有深入的了解，还能为您提供专业的选购建议和售后服务。
                    无论您是初学者还是资深骑行爱好者，我们都能满足您的需求。
                  </p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 服务介绍 -->
      <el-row class="section" justify="center">
        <el-col :span="20">
          <div class="section-title">我们的服务</div>
          <div class="section-content">
            <el-row :gutter="20">
              <el-col :span="8" v-for="(service, index) in services" :key="index">
                <el-card class="service-card">
                  <div class="service-icon">
                    <i :class="service.icon"></i>
                  </div>
                  <div class="service-title">{{ service.title }}</div>
                  <div class="service-content">{{ service.content }}</div>
                </el-card>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>

      <!-- 产品展示 -->
      <el-row class="section" justify="center">
        <el-col :span="20">
          <div class="section-title">热门产品</div>
          <div class="section-content">
            <el-tabs v-model="activeTab" type="card">
              <el-tab-pane label="山地车" name="mountain">
                <el-row :gutter="20">
                  <el-col :span="6" v-for="(product, index) in mountainBikes" :key="index">
                    <el-card class="product-card">
                      <img :src="product.imgUrl" alt="山地车" class="product-img">
                      <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-price">{{ product.price }}</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="公路车" name="road">
                <el-row :gutter="20">
                  <el-col :span="6" v-for="(product, index) in roadBikes" :key="index">
                    <el-card class="product-card">
                      <img :src="product.imgUrl" alt="公路车" class="product-img">
                      <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-price">{{ product.price }}</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
              <el-tab-pane label="城市车" name="city">
                <el-row :gutter="20">
                  <el-col :span="6" v-for="(product, index) in cityBikes" :key="index">
                    <el-card class="product-card">
                      <img :src="product.imgUrl" alt="城市车" class="product-img">
                      <div class="product-info">
                        <div class="product-name">{{ product.name }}</div>
                        <div class="product-price">{{ product.price }}</div>
                      </div>
                    </el-card>
                  </el-col>
                </el-row>
              </el-tab-pane>
            </el-tabs>
          </div>
        </el-col>
      </el-row>

      <!-- 客户评价 -->
      <el-row class="section" justify="center">
        <el-col :span="20">
          <div class="section-title">客户评价</div>
          <div class="section-content">
            <el-carousel height="200px" indicator-position="outside">
              <el-carousel-item v-for="(review, index) in reviews" :key="index">
                <div class="review-card">
                  <div class="review-header">
                    <img :src="review.avatar" alt="用户头像" class="review-avatar">
                    <div class="review-user">
                      <div class="review-name">{{ review.name }}</div>
                      <div class="review-date">{{ review.date }}</div>
                    </div>
                  </div>
                  <div class="review-content">{{ review.content }}</div>
                </div>
              </el-carousel-item>
            </el-carousel>
          </div>
        </el-col>
      </el-row>

      <!-- 联系我们 -->
      <el-row class="section" justify="center">
        <el-col :span="20">
          <div class="section-title">联系我们</div>
          <div class="section-content">
            <el-row>
              <el-col :span="12">
                <div class="contact-info">
                  <div class="contact-item">
                    <i class="el-icon-location"></i>
                    <span>地址：北京市朝阳区建国路88号</span>
                  </div>
                  <div class="contact-item">
                    <i class="el-icon-phone"></i>
                    <span>电话：010-12345678</span>
                  </div>
                  <div class="contact-item">
                    <i class="el-icon-message"></i>
                    <span>邮箱：info@bikeshop.com</span>
                  </div>
                  <div class="contact-item">
                    <i class="el-icon-time"></i>
                    <span>营业时间：周一至周日 9:00-21:00</span>
                  </div>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="contact-form">
                  <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="姓名">
                      <el-input v-model="form.name"></el-input>
                    </el-form-item>
                    <el-form-item label="电话">
                      <el-input v-model="form.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱">
                      <el-input v-model="form.email"></el-input>
                    </el-form-item>
                    <el-form-item label="留言">
                      <el-input type="textarea" v-model="form.message"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitForm">提交</el-button>
                    </el-form-item>
                  </el-form>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-col>
      </el-row>
    </el-main>

    <!-- 页脚 -->
    <el-footer class="footer">
      <div class="footer-content">
        <el-row>
          <el-col :span="6">
            <div class="footer-logo">BIKE SHOP</div>
            <p>专注于高品质自行车销售与服务</p>
          </el-col>
          <el-col :span="6">
            <div class="footer-title">快速链接</div>
            <ul class="footer-links">
              <li><a href="#">首页</a></li>
              <li><a href="#">自行车</a></li>
              <li><a href="#">配件</a></li>
              <li><a href="#">服务</a></li>
              <li><a href="#">关于我们</a></li>
            </ul>
          </el-col>
          <el-col :span="6">
            <div class="footer-title">联系方式</div>
            <ul class="footer-contacts">
              <li><i class="el-icon-location"></i> 北京市朝阳区建国路88号</li>
              <li><i class="el-icon-phone"></i> 010-12345678</li>
              <li><i class="el-icon-message"></i> info@bikeshop.com</li>
            </ul>
          </el-col>
          <el-col :span="6">
            <div class="footer-title">关注我们</div>
            <div class="footer-social">
              <a href="#" class="social-icon"><i class="el-icon-weixin"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-weibo"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-instagram"></i></a>
              <a href="#" class="social-icon"><i class="el-icon-youtube"></i></a>
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="footer-bottom">
        <p>© 2025 BIKE SHOP. 保留所有权利。</p>
      </div>
    </el-footer>
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return {
      activeIndex: '1',
      activeTab: 'mountain',
      carouselItems: [
        {
          imgUrl: 'https://picsum.photos/1920/400?random=10',
          title: '探索无限可能',
          description: '选择适合你的自行车，开启骑行新体验'
        },
        {
          imgUrl: 'https://picsum.photos/1920/400?random=11',
          title: '专业服务',
          description: '我们的技师团队提供全方位的自行车维修和保养服务'
        },
        {
          imgUrl: 'https://picsum.photos/1920/400?random=12',
          title: '品质保证',
          description: '精选全球知名品牌，为您提供高品质的自行车产品'
        }
      ],
      services: [
        {
          icon: 'el-icon-bicycle',
          title: '自行车销售',
          content: '我们提供各种类型的自行车，包括山地车、公路车、城市车等，满足不同需求。'
        },
        {
          icon: 'el-icon-s-tools',
          title: '维修保养',
          content: '专业的维修团队，提供全面的自行车维修和保养服务，让您的爱车始终如新。'
        },
        {
          icon: 'el-icon-shopping-bag-2',
          title: '配件销售',
          content: '丰富的自行车配件和装备，从头盔、锁具到骑行服装，一站式购齐。'
        },
        {
          icon: 'el-icon-s-claim',
          title: '骑行培训',
          content: '提供专业的骑行培训课程，适合不同水平的骑行爱好者，提升骑行技能。'
        },
        {
          icon: 'el-icon-s-cooperation',
          title: '团队活动',
          content: '定期组织骑行活动和比赛，让您结识更多骑行爱好者，享受骑行乐趣。'
        },
        {
          icon: 'el-icon-truck',
          title: '线上购物',
          content: '便捷的线上购物平台，让您足不出户就能选购心仪的自行车和配件。'
        }
      ],
      mountainBikes: [
        {
          name: '探险家 X9',
          price: '¥4,999',
          imgUrl: 'https://picsum.photos/300/200?random=20'
        },
        {
          name: '征服者 Pro',
          price: '¥6,799',
          imgUrl: 'https://picsum.photos/300/200?random=21'
        },
        {
          name: '山地王者',
          price: '¥8,599',
          imgUrl: 'https://picsum.photos/300/200?random=22'
        },
        {
          name: '越野之星',
          price: '¥5,299',
          imgUrl: 'https://picsum.photos/300/200?random=23'
        }
      ],
      roadBikes: [
        {
          name: '风速 5000',
          price: '¥5,999',
          imgUrl: 'https://picsum.photos/300/200?random=24'
        },
        {
          name: '闪电 S2',
          price: '¥7,899',
          imgUrl: 'https://picsum.photos/300/200?random=25'
        },
        {
          name: '公路飞鹰',
          price: '¥6,499',
          imgUrl: 'https://picsum.photos/300/200?random=26'
        },
        {
          name: '极速先锋',
          price: '¥9,299',
          imgUrl: 'https://picsum.photos/300/200?random=27'
        }
      ],
      cityBikes: [
        {
          name: '都市行者',
          price: '¥2,599',
          imgUrl: 'https://picsum.photos/300/200?random=28'
        },
        {
          name: '城市精灵',
          price: '¥3,199',
          imgUrl: 'https://picsum.photos/300/200?random=29'
        },
        {
          name: '通勤达人',
          price: '¥2,899',
          imgUrl: 'https://picsum.photos/300/200?random=30'
        },
        {
          name: '时尚城市',
          price: '¥3,699',
          imgUrl: 'https://picsum.photos/300/200?random=31'
        }
      ],
      reviews: [
        {
          avatar: 'https://picsum.photos/100/100?random=40',
          name: '张先生',
          date: '2025-05-15',
          content: '在这家店买了一辆山地车，质量非常好，店员也很专业，给了很多实用的建议。骑行体验很棒！'
        },
        {
          avatar: 'https://picsum.photos/100/100?random=41',
          name: '李女士',
          date: '2025-05-20',
          content: '服务非常好，我的自行车出了点问题，店员很快就帮我修好了，而且价格合理。强烈推荐！'
        },
        {
          avatar: 'https://picsum.photos/100/100?random=42',
          name: '王先生',
          date: '2025-06-02',
          content: '买了一套骑行装备，质量都很好，穿着很舒适。店里的环境也很舒适，购物体验愉快。'
        }
      ],
      form: {
        name: '',
        phone: '',
        email: '',
        message: ''
      }
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    submitForm() {
      this.$message({
        message: '感谢您的留言，我们会尽快与您联系！',
        type: 'success'
      });
      this.form = {
        name: '',
        phone: '',
        email: '',
        message: ''
      };
    }
  }
}
</script>

<style scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.header {
  background-color: #333;
  color: white;
  line-height: 60px;
}

.logo {
  font-size: 24px;
  font-weight: bold;
}

.menu {
  background-color: #333 !important;
  color: white !important;
  border-bottom: none !important;
}

.header-right {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.carousel-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
}

.carousel-text {
  position: absolute;
  bottom: 20px;
  left: 20px;
  background-color: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 20px;
  border-radius: 5px;
  text-align: left;
}

.container {
  padding: 40px 0;
}

.section {
  margin-bottom: 40px;
}

.section-title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 30px;
}

.section-content {
  width: 100%;
}

.about-img {
  width: 100%;
  height: 400px;
  object-fit: cover;
  border-radius: 5px;
}

.about-text {
  text-align: left;
  padding: 20px;
}

.about-text h3 {
  font-size: 24px;
  margin-bottom: 20px;
}

.about-text p {
  margin-bottom: 15px;
  line-height: 1.8;
}

.service-card {
  text-align: center;
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.service-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
}

.service-icon {
  font-size: 36px;
  color: #409EFF;
  margin-bottom: 20px;
}

.service-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
}

.service-content {
  color: #606266;
}

.product-card {
  text-align: center;
  border-radius: 5px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
}

.product-img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

.product-info {
  padding: 15px;
}

.product-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 10px;
}

.product-price {
  color: #f56c6c;
  font-size: 18px;
  margin-bottom: 15px;
}

.review-card {
  text-align: left;
  padding: 20px;
  border-radius: 5px;
  background-color: #f5f7fa;
}

.review-header {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.review-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 15px;
}

.review-user {
  display: flex;
  flex-direction: column;
}

.review-name {
  font-weight: bold;
}

.review-date {
  color: #909399;
  font-size: 14px;
}

.contact-info {
  text-align: left;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.contact-item i {
  font-size: 20px;
  color: #409EFF;
  margin-right: 15px;
}

.footer {
  background-color: #333;
  color: white;
  padding: 40px 0;
}

.footer-content {
  margin-bottom: 30px;
}

.footer-logo {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
}

.footer-links, .footer-contacts {
  list-style-type: none;
  padding: 0;
  text-align: left;
}

.footer-links li, .footer-contacts li {
  margin-bottom: 10px;
}

.footer-links a {
  color: white;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

.footer-contacts i {
  margin-right: 10px;
}

.footer-social {
  display: flex;
}

.social-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
  transition: all 0.3s ease;
}

.social-icon:hover {
  background-color: rgba(255, 255, 255, 0.3);
}

.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  font-size: 14px;
}
</style>
    